import { useRef, useState } from 'react'
import { Link } from 'react-router-dom'
import { CSSTransition } from 'react-transition-group'
import logoSvg from '../logo.svg'
import '../assets/styles/index.css'

const scrollToAnchor = (anchorName: string) => {
  console.error('anchorName', anchorName)
  if (anchorName) {
    const anchorElement = document.getElementById(anchorName)
    if (anchorElement)
      anchorElement.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' })
  }
}

const AnchorItem = (props: any) => {
  const title = props.title
  const anchor = props.anchor

  return (
    // 例：about#id0 split 后 [about, id0]
    <li className="leading-40px" onClick={() => scrollToAnchor(anchor.split('#')[1])}>
      <Link to={anchor} className="text-[#777777] text-18px no-underline hover:text-20px">
        {title}
      </Link>
    </li>
  )
}
const LiItem = (props: any) => {
  const menu = props.menu
  const index = props.index

  const nodeRef = useRef(null)

  // 定义鼠标移动到的菜单索引
  const [activeIndex, setActiveIndex] = useState(-1)
  const handleMouseEnter = (index: number) => {
    setActiveIndex(index)
  }

  // 鼠标离开重置 -1
  const handleMouseLeave = () => {
    setActiveIndex(-1)
  }
  return (
    <li className="h-[100%] relative"
    onMouseEnter={() => handleMouseEnter(index)}
    onMouseLeave={handleMouseLeave}
    >
      <Link to={menu.path} className="h-[100%] flex items-center text-white no-underline">
        {menu.title}
        {menu.anchorList && menu.anchorList.length && <svg className="w-14px h-14px ml-4px fill-white" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" data-v-13a8b3e6=""><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z" /></svg>}
      </Link>

      {
        menu.anchorList && menu.anchorList.length
        && <CSSTransition nodeRef={nodeRef} in={activeIndex === index} timeout={300} unmountOnExit classNames="scroll-y-transition">
          <ul ref={nodeRef} className="bg-white py-12px pl-26px min-w-186px rounded-8px absolute top-55px left-[-30px]">
            {
              menu.anchorList.map((anchor: any) => {
                return (
                  <AnchorItem key={anchor.anchor} anchor={anchor.anchor} title={anchor.title} />
                )
              })
            }
          </ul>
        </CSSTransition>
      }
    </li>
  )
}

const EHeader = (props: any) => {
  const [menus] = useState([
    { title: 'home', path: '/home' },
    {
      title: 'index',
      path: '/',
      anchorList: [
        { title: 'id0', anchor: '/#id0' },
        { title: 'id1', anchor: '/#id1' },
        { title: 'id2', anchor: '/#id2' },
        { title: 'id3', anchor: '/#id3' },
        { title: 'id4', anchor: '/#id4' },
        { title: 'id5', anchor: '/#id5' },
      ],
    },
    {
      title: 'about',
      path: '/about',
      anchorList: [
        { title: 'id1', anchor: '/about#id1' },
        { title: 'id2', anchor: '/about#id2' },
        { title: 'id3', anchor: '/about#id3' },
        { title: 'id4', anchor: '/about#id4' },
        { title: 'id5', anchor: '/about#id5' },
      ],
    },
    { title: 'other', path: '/other' },
  ])

  return (
    <header style={props.style} className="w-[100%] h-70px fixed top-0 left-0 z-5">
      <section className="max-w-900px min-w-600px h-[100%] mx-auto flex justify-between">
        <section className="h-[100%] flex items-center">
          <img src={logoSvg} alt="" className="h-40px" />
        </section>
        <section className="h-[100%]">
          <ul className="min-w-400px flex justify-between items-center h-[100%]
             font-bold text-20px text-white
          ">
            {
              menus.map((menu, index) => {
                return (
                  <LiItem key={menu.title} menu={menu} index={index} />
                )
              })
            }
          </ul>
        </section>
      </section>
    </header>
  )
}

export default EHeader
